<template>
  <div id="login">
        <div class="form" >
            <a href="/.">-Farmer Login Demo</a>
            <h4>欢迎登录EasyLoginDemo</h4>
            <input
                type="text"
                placeholder="UserName"
                v-model="username"
            >
            <input
                type="password"
                placeholder="Password"
                v-model="password"
                @keyup.enter='login'
            >
            <!-- <input type="button" value="登录"> -->
            <button @click="login">登录</button>
        </div>
    </div>
</template>

<script>
import apiConfig from '@/api/apiConfig'
import mdui from 'mdui'

export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login () {
      if (this.username.length < 4 || this.username === '' || this.password === '') {
        mdui.snackbar({
          message: '输入的数据不符合要求，请重新检查',
          position: 'top'
        })
        return
      }
      const conf = apiConfig.admin.login(this.username, this.password)
      try {
        const datas = await this.$axios(conf)
        if (datas.status === 200) {
          this.$store.commit('setToken', datas.data.data.token)
          this.$store.commit('setUser', datas.data.data.username)
          this.$store.commit('setAdmin', true)
          localStorage.setItem('token', datas.data.data.token)
          localStorage.setItem('username', datas.data.data.username)
          localStorage.setItem('isAdmin', true)
          mdui.snackbar({
            message: '登录成功',
            position: 'top',
            timeout: 2000,
            onClose: () => {
              this.$router.push('/admin')
            }
          })
        } else {
          mdui.snackbar({ message: datas.message, position: 'top' })
        }
      } catch (error) {
        console.log('err', error)
        mdui.snackbar({ message: error.message, position: 'top' })
      }
    }
  }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

/* #login{
    background-color: #efefef;
} */

h4{
    font-size: 18px;
    padding: 15px;
}

.form {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100vh;
    width: 80vw;
}

button,
.form input{
    outline: 0;
    margin: 0 0 15px;
    box-sizing: border-box;
    font-size: 14px;
    border: 0;
    width: 25vw;
    max-width: 335px;
    min-width: 200px;
    padding: 10px;
    /* background-color: #efefef; */
    border-bottom: 1px solid #1890ff;
}

input:focus{
    border-radius: 5px;
    border: 1px solid #1890ff;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

button{
    font-size: 15px;
    color: #FFFFFF;
    background-color: #419cf1;
}

button:hover{
    cursor: pointer;
    background: #0285ff;
    border-color: #0285ff;
    color: #FFFFFF;
}

a,
a:link,
a:visited,
a:hover,
a:active{
    text-decoration: none;
    font-size: 64px;
    color: rgb(228, 228, 228);
    padding: 15px;
}
</style>
